<template>
    <!-- 由于界面的头部和底部都不作改变，所以讲这个组件作为渲染其他模块的窗口 -->
    <div class="home">

        <!-- 插入图片走马灯组件 -->
        <div id="carouselContainer" style="box-shadow: 0px 0px 10px #3636362c;">
            <div id="carousel">
                <el-carousel :interval="4000" height="390px" width="585px">
                    <el-carousel-item v-for="item in homeAd" :key="item.title">
                        <h5 id="carouselTitle">{{ item.title }}</h5>
                        <!-- <router-link :to="{ name:'projectdetail',params: {project_id: item._id}}" style="text-decoration:none;"> -->
                        <img :src="item.image" class="carouselPicture" @click="$router.push(item.url)" width="100%;"
                            height="100%" />
                        <!-- </router-link> -->
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>


        <!-- ************************************中间主体************************************ -->
        <!-- <div class="row" style="width: 100%;"> -->
        <el-row :gutter="20" style="width: 100%;">
            <!-- 左侧小组件 -->
            <el-col :span="6" :offset="3">
                <!-- <div class="col-3 offset-1"> -->
                <!-- 左侧跳转方案分类菜单栏 -->
                <div id="side">
                    <router-link v-for="item in homeData" :key="item.name" :to="{ name:'class',params: {classId: item._id, class: item.name, sort: '0', level: 1, page: 1}}"
                        style="display: block;margin: 2px;">
                        <el-button class="sideMenu" style="box-shadow: 0px 0px 10px #3636362c;" round>{{item.name}}</el-button>
                    </router-link>
                </div>

                <!-- 左侧 APP 下载二维码，设置 popover 弹出框，使鼠标 hover 下载组件会跳出大的二维码 -->
                <el-popover style="float:right;" placement="right" width="300px" trigger="hover">
                    <img id="ActiveImg" src="../assets/qrcode.jpg" class="image">
                    <el-card slot="reference" id="cardbody" :body-style="{ padding: '5px' }">
                        <img id="StaticImg" src="../assets/qrcode.jpg" class="image">
                        <center>
                            <p style="margin-bottom: 0px;"><a href="#" style="color: black;text-decoration: none;"><b>下载淘方案
                                        APP ></b></a></p>
                        </center>
                        <center>
                            <p style="color: lightslategray;margin-bottom: 0px;">随时随地查找方案</p>
                        </center>
                    </el-card>
                </el-popover>
            </el-col>
            <!-- </div> -->

            <!-- 右侧卡片方案展示 -->
            <!-- <div class="col-6"> -->
            <el-col :span="10">
                <el-card class="card" shadow="always" :body-style="{ padding: '10px' }" v-for="(item, index) in projectClassData"
                    :key="item._id">
                    <el-row>

                        <!-- 图片区域 -->
                        <el-col :span="9"><img class="cardImg" :src="item.icon" /></el-col>

                        <!-- 文本区域 -->
                        <el-col :span="14" style="margin-left: 10px;">
                            <el-container>
                                <!-- 方案标题 -->
                                <el-header style="padding: 0px;height: 50px;">
                                    <router-link :to="{ name:'projectdetail',params: {project_id: item.project_id}}"
                                        style="text-decoration:none;">
                                        <h5 class="title">{{item.titleName}}</h5>
                                    </router-link>
                                </el-header>
                                <!-- 方案简介 -->
                                <el-main style="padding: 0px;">
                                    <p class="intro">{{item.intro}}</p>
                                </el-main>

                                <!-- 用户操作区 -->
                                <el-footer style="padding: 0px;">
                                    <div id="UserAction" class="clearfix">
                                        <!-- 方案ID -->
                                        <p class="projectId">ID：{{item.project_id}}</p><br>
                                        <!-- 推荐评分 -->
                                        <el-rate v-model="item.recommend" disabled show-score text-color="#ff9900"
                                            score-template="{value}" style="display: inline;margin-right: 20px;"></el-rate>
                                        <!-- 点赞按钮 -->
                                        <el-button type="text" class="actionButton" @click="btnOperation(item._id, 'like', $event, index)">
                                            <i ref="like" :class="$store.state.like.indexOf(item._id) != -1 ?'iconfont el-icon-aixin_shixin':'iconfont el-icon-aixin'"></i><span>{{item.like}}</span>
                                        </el-button>
                                        <!-- 收藏按钮 -->
                                        <el-button type="text" class="actionButton" @click="btnOperation(item._id, 'collection', $event, index)">
                                            <i ref="collection" :class="$store.state.collection.indexOf(item._id) != -1 ?'iconfont el-icon-shoucang_shixin':'iconfont el-icon-shoucang'"></i><span>{{item.collect}}</span>
                                        </el-button>
                                    </div>
                                </el-footer>

                            </el-container>
                        </el-col>
                    </el-row>
                </el-card>

                <!-- 自动加载完后出现的查看全部方案的按钮 -->
                <center>
                    <el-button v-if="pageIsOver" type="primary" style="margin: auto;" @click="btnRouterTo('class',params)">查看全部方案</el-button>
                </center>
            </el-col>
            <!-- </div> -->
        </el-row>
        <!-- </div> -->
    </div>
</template>

<script>
    // 导出本窗口组件以便由 App 引用
    export default {
        data() {
            return {
                homeData: [], //主页数据
                homeAd: [], //主页走马灯图片数据
                projectClassData: [], // 无限滚动数据
                userCollection: '', // 用户收藏信息
                collectionFlag: true, //收藏图标的切换
                likeFlag: true, //点赞图标的切换
                pageIsOver: false, //自动加载限制，跳转全部方案按钮出现
                projectParams: { //推荐方案的 Api 请求参数
                    classId: '1',
                    level: 0,
                    sort: 1,
                    limit: 8,
                    page: 1
                },
                params: { //跳转全部方案的路由参数
                    classId: 'all',
                    class: '全部分类',
                    sort: '0',
                    level: 0,
                    page: 1
                },
                url: { //Api
                    homeApi: this.$Global.url.index,
                    projectApi: this.$Global.url.findClass,
                    collectionApi: this.$Global.url.collection,
                    likeApi: this.$Global.url.like,
                }
            }
        },
        created() {
            // if (process.env.NODE_ENV === 'development') {
            this.url.homeApi = this.$Global.url.baseUrl + this.$Global.url.index;
            this.url.projectApi = this.$Global.url.baseUrl + this.$Global.url.findClass;
            this.url.collectionApi = this.$Global.url.baseUrl + this.$Global.url.collection;
            this.url.likeApi = this.$Global.url.baseUrl + this.$Global.url.like;
            // }
            this.getData(); //获取主页数据
            this.getProjectData(); //获取推荐方案数据
            window.addEventListener('scroll', this.handleScroll); //监听滚动事件
        },
        // mounted() {
        //   this.getData();
        //   this.getProjectData();
        //   window.addEventListener('scroll', this.handleScroll);
        // },
        methods: {
            /* 下载 home 主页数据 */
            getData() {
                this.$http.get(this.url.homeApi).then((response) => {
                    if (response.status == 200) {
                        this.homeData = response.data.Home;
                        this.homeAd = response.data.Ad;
                        this.homeAd.forEach(ad => {
                            ad.url = ad.url.replace('https://www.atu360.cn/api/phone/project',
                                'projectclass/projectdetail')
                        });
                        // console.log(response.data);
                        // console.log(this.homeAd);
                    } else {
                        this.$message('获取数据异常');
                    }
                }).catch((error) => {
                    console.log(error);
                })
            },
            /* 下载滚动方案数据 */
            getProjectData() {
                this.$http.get(this.url.projectApi, {
                    params: this.projectParams
                }).then((response) => {
                    if (response.status == 200) {
                        this.projectClassData = this.projectClassData.concat(response.data.docs);
                        // console.log(this.projectClassData);
                        this.projectParams.page++;
                    } else {
                        this.$message('获取数据异常')
                    }
                }).catch((error) => {
                    console.log(error);
                })
            },
            /**
             * 监听滚动事件，滚动加载数据
             * this.projectParams.page : 当前加载数据页数
             * totalPage : 总加载页数
             * this.pageIsOver : 滚动加载开关，关闭时显示查看全部方案按钮
             */
            handleScroll() {
                var totalPage = 3;
                //下面这句主要是获取网页的总高度，主要是考虑兼容性所以把Ie支持的documentElement也写了，这个方法至少支持IE8
                // var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
                var htmlHeight = window.innerHeight;
                //clientHeight是网页在浏览器中的可视高度，
                var clientHeight = document.body.clientHeight || document.documentElement.clientHeight;
                //scrollTop是浏览器滚动条的top位置，
                var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                //通过判断滚动条的top位置与可视网页之和与整个网页的高度是否相等来决定是否加载内容；
                if (scrollTop + htmlHeight >= clientHeight) {
                    if (this.projectParams.page <= totalPage) {
                        this.getProjectData();
                    } else {
                        this.pageIsOver = true;
                    }

                }
            },
            /**
             * 路由跳转
             * @params : 路由跳转参数
             */
            btnRouterTo(name, params) {
                this.$router.push({
                    name: name,
                    params: params
                });
            },
            /**
             * 收藏 & 点赞
             */
            btnOperation(id, operation, event, index) {
                var data = {
                    _id: id
                };
                var url;
                if (operation === 'like') {
                    url = this.url.likeApi;
                } else if (operation === 'collection') {
                    url = this.url.collectionApi;
                }
                this.$http.post(url, data).then(response => {
                        if (response.status == 200) {
                            if (response.data.success) {
                                this.$message(response.data.message);
                                if (operation === 'like') {
                                    this.$store.commit('changeLike', id);
                                } else if (operation === 'collection') {
                                    this.$store.commit('changeCollection', id);
                                }

                                switch (response.data.message) {
                                    case '删除点赞成功':
                                        this.projectClassData[index].like--;
                                        break;
                                    case '添加点赞成功':
                                        this.projectClassData[index].like++;
                                        break;
                                    case '删除收藏成功':
                                        this.projectClassData[index].collect--;
                                        break;
                                    case '添加收藏成功':
                                        this.projectClassData[index].collect++;
                                        break;
                                }
                            } else {
                                this.$message('操作失败');
                            }
                        } else {
                            this.$message('请求失败');
                        }
                    })
                    .catch(error => {
                        // console.log(error);
                        if (error.status == 401) {
                            this.$message({
                                type: 'warning',
                                message: '请登录后尝试！'
                            })
                        }
                    });
            }
        }
    };

    // // 滚动监听
    // $(window).scroll(function () {
    //   //下面这句主要是获取网页的总高度，主要是考虑兼容性所以把Ie支持的documentElement也写了，这个方法至少支持IE8
    //   var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
    //   //clientHeight是网页在浏览器中的可视高度，
    //   var clientHeight = document.body.clientHeight || document.documentElement.clientHeight;
    //   //scrollTop是浏览器滚动条的top位置，
    //   var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    //   //通过判断滚动条的top位置与可视网页之和与整个网页的高度是否相等来决定是否加载内容；
    //   if (scrollTop + clientHeight == htmlHeight) {
    //     getProjectData();
    //   }
    // })
</script>

<style scoped>
    /* 走马灯背景色 */

    #carouselContainer {
        /* padding-top: 40px; */
        padding-bottom: 40px;
        /* background-color: #d2af73; */
        background: url(../assets/background.jpeg);
        box-shadow: 1, 1, 8px, black;
    }


    /* carousel */

    #carousel {
        /* background-color: #000000; */
        border-radius: 8px;
        /* width: 80%; */
        margin-left: auto;
        margin-right: auto;
        width: 585px;
    }


    /* 走马灯图片标题 */

    #carouselTitle {
        background-color: rgba(192, 196, 204, 0.63);
        color: #303133;
        position: relative;
        top: 94%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
        text-align: center;
    }


    /* 走马灯图片 */

    .carouselPicture {
        overflow: hidden;
        border-radius: 6px;
    }

    .el-carousel__item {
        border-radius: 6px;
    }

    /* 侧边菜单容器 */

    #side {
        margin: 20px;
        margin-right: 0;
        float: right;
    }


    /* 分类选择 */

    .sideMenu {
        padding: 12px auto;
        width: 200px;
        background-color: #efefef;
        border: none;
    }


    /* APP 下载框样式 */

    #StaticImg {
        width: 200px;
        display: block;
    }

    #ActiveImg {
        width: 400px;
    }


    /* 卡片方案展示样式 */

    #ProjectScroll.botton {
        padding: 0px;
    }

    #UserAction {
        position: absolute;
        bottom: 0px;
    }

    #ProjectScroll.image {
        width: auto;
        height: 100%;
        display: block;
    }

    .card {
        margin: 10px;
        min-width: 400px;
    }

    .cardImg {
        width: 100%;
        height: 200px;
        overflow: hidden;
    }

    .title {
        /* 文本省略处理 */
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: black;
    }

    .intro {
        margin: 0px;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }

    .projectId {
        line-height: 14px;
        margin-bottom: 0px;
        display: inline-block;
        position: relative;
        left: 0px;
    }

    .clearfix {
        margin-top: 13px;
        line-height: 12px;
    }

    .actionButton {
        outline: none;
    }


    /* .clearfix:before,
                                     .clearfix:after {
                                       display: table;
                                       content: "";
                                     }
                                     
                                     .clearfix:after {
                                       clear: both;
                                     } */
</style>